<template>
  <div>

    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>人事管理</el-breadcrumb-item>
      <el-breadcrumb-item>离职管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入姓名" clearable v-model="empName" @clear="searchDimission">
            <el-button slot="append" icon="el-icon-search" @click="searchDimission"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible=true">添加离职员工</el-button>
        </el-col>
      </el-row>

      <el-table :data="dimissionList" border stripe>
        <el-table-column label="工号" prop="id"></el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="所属部门" prop="dept"></el-table-column>
        <el-table-column label="职位" prop="post"></el-table-column>
        <el-table-column label="离职日期" prop="leaveTime"></el-table-column>
        <el-table-column label="离职原因" prop="leaveCause"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="warning" size="mini" @click="showDialog(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="removeById(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[2, 4 , 8, 16]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>
    </el-card>

    <!--添加-->
    <el-dialog title="添加离职员工" :visible.sync="addDialogVisible" width="50%">
      <el-form
          :model="addForm"
          :rules="addFormRules"
          ref="addFormRef"
          label-width="100px"
          class="demo-ruleForm"
      >
        <el-form-item label="员工工号" prop="id">
          <el-input v-model="addForm.id"></el-input>
        </el-form-item>
        <el-form-item label="员工姓名" prop="name">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="所属部门" prop="dept">
          <el-input v-model="addForm.dept"></el-input>
        </el-form-item>
        <el-form-item label="职位" prop="post">
          <el-input v-model="addForm.post"></el-input>
        </el-form-item>
        <el-form-item label="离职原因" prop="leaveCause">
          <el-input v-model="addForm.leaveCause"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addDimission">确 定</el-button>
                <el-button @click="canceladd">取 消</el-button>
            </span>
    </el-dialog>

    <!--修改-->
    <el-dialog
        title="修改讲师"
        :visible.sync="editDialogVisible"
        width="50%"
        @close="editFormClose"
        :close-on-click-modal="false"
        ref="editFormRef"
    >
      <el-form
          :model="editForm"
          :rules="editFormRules"
          ref="editFormRef"
          label-width="100px"
          class="demo-ruleForm"
      >
        <el-form-item label="员工工号" prop="id">
          <el-input v-model="editForm.id" disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="员工姓名" prop="name">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="所属部门" prop="dept">
          <el-input v-model="editForm.dept"></el-input>
        </el-form-item>
        <el-form-item label="职位" prop="post">
          <el-input v-model="editForm.post"></el-input>
        </el-form-item>
        <el-form-item label="离职原因" prop="leaveCause">
          <el-input v-model="editForm.leaveCause"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editDimission">确 定</el-button>
                <el-button @click="cancelEdit">取 消</el-button>
            </span>
    </el-dialog>



  </div>


</template>

<script>
export default {
  data() {
    return {

      editFormRules:{
        name:[
          {required:true,message:"名称不能为空",trigger:"blur"}
        ]
      },

      editForm:{
        id:-1,
        name:'',
        dept:'',
        post:'',
        leaveTime:'',
        leaveCause:''
      },
      editDialogVisible:false,
      addFormRules:{
        name:[
          {required:true,message:"员工姓名不能为空",trigger:"blur"}
        ],
        id:[
          {required:true,message:"员工工号不能为空",trigger:"blur"}
        ]
      },
      addForm:{
        id:'',
        name:'',
        dept:'',
        post:'',
        leaveCause:''
      },
      addDialogVisible:false,
      pageNum: 1,
      pageSize: 4,
      dimissionList: [],
      total: 9,
      empName: "",

    };
  },
  methods: {

    editFormClose() {
      this.$refs.editFormRef.resetFields();
    },
    // 修改
    editDimission() {
      this.$refs.editFormRef.validate(valid=>{
        if (valid){
          let url = this.$HRMSUrl+"/dimission/modifyDimission"
          this.$axios.put(url,this.editForm)
              .then(res=>{
                if (res.data.code == 200){
                  this.getDimissionList();
                  this.editDialogVisible = false ;
                }else {
                  this.$message({
                    type:"error",
                    message:res.data.msg,
                    duration:1000
                  })
                }
              })
        }else {
          return false
        }
      })
    },

    cancelEdit(){
      this.$refs.editFormRef.resetFields();
      //this.editRoleForm={};
      this.editDialogVisible = false;
    },
    //反显数据
    showDialog(row){
      this.editDialogVisible=true;
      this.editForm.id=row.id;
      this.editForm.name=row.name;
      this.editForm.dept=row.dept;
      this.editForm.post=row.post;
      this.editForm.leaveTime=row.leaveTime;
      this.editForm.leaveCause=row.leaveCause;

    },
    //删除
    removeById(id){
      let url = this.$HRMSUrl+"/dimission/deleteDimssion/"+id;
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete(url)
            .then(res=>{
              if (res.data.code == 200){
                this.getDimissionList()
              }else {
                this.$message({
                  type:"error",
                  message:res.data.msg,
                  duration:1000
                })
              }
            })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    //取消添加
    canceladd(){
      this.addForm={};
      this.addDialogVisible=false;
    },

    //添加
    addDimission() {
      this.$refs.addFormRef.validate(valid=>{
        if (valid) {
          let url = this.$HRMSUrl+"/dimission/addDimission";
          this.$axios.post(url,this.addForm)
              .then(res=>{
                if (res.data.code == 200){
                  this.addDialogVisible = false;
                  this.addForm = {};
                  this.getDimissionList();

                }else {
                  this.$message({
                    type:"error",
                    message:res.data.msg,
                    duration:1000
                  })
                }
              })
        }else {
          return false ;
        }
      })

    },

    //初始化数据
    getDimissionList() {
      let url = this.$HRMSUrl + "/dimission/loadMenu"
      this.$axios.get(url, {
        params: {
          name: this.empName,
          now: this.pageNum,
          size: this.pageSize,
          total: this.total
        }
      }).then(res => {
        if (res.data.code === 200) {
          console.log(res)
          this.dimissionList = res.data.data.list;
          this.pageNum = res.data.data.pageNum;
          this.pageSize = res.data.data.pageSize;
          this.total = res.data.data.total;
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      })
    },
    //搜索
    searchDimission() {
      this.pageNum = 1;
      this.getDimissionList();
    },
    handleSizeChange(newSize) {
      // alert(newSize)
      this.pageSize = newSize;
      this.getDimissionList();
    },
    handleCurrentChange(newPage) {
      // alert(newPage)
      this.pageNum = newPage;
      this.getDimissionList();
    },

  },
  created() {
    this.searchDimission();
  }
}
</script>

<style scoped>

</style>